<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>水泡晃动效果</title>
	<style>
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: #f0f0f0;
			margin: 0;
			padding: 0;
		}

		.bubble {
			width: 100px;
			height: 100px;
			background-color: #00f;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 20px;
			text-align: center;
			animation: bubble 3s infinite ease-in-out;
		}

		@keyframes bubble {

			0%,
			100% {
				transform: translate(0, 0) scale(1);
			}

			25% {
				transform: translate(3px, -3px) scale(1.05);
			}

			50% {
				transform: translate(-3px, 3px) scale(0.95);
			}

			75% {
				transform: translate(2px, -2px) scale(1.03);
			}
		}
	</style>
</head>

<body>
	<div class="bubble">水泡</div>
mix-blend-normal          mix-blend-mode: normal;          /* 正常 */
mix-blend-multiply        mix-blend-mode: multiply;        /* 正片叠底 */
mix-blend-screen          mix-blend-mode: screen;          /* 滤色 */
mix-blend-overlay         mix-blend-mode: overlay;         /* 叠加 */
mix-blend-darken          mix-blend-mode: darken;          /* 变暗 */
mix-blend-lighten         mix-blend-mode: lighten;         /* 变亮 */
mix-blend-color-dodge     mix-blend-mode: color-dodge;     /* 颜色减淡 */
mix-blend-color-burn      mix-blend-mode: color-burn;      /* 颜色加深 */
mix-blend-hard-light      mix-blend-mode: hard-light;      /* 强光 */
mix-blend-soft-light      mix-blend-mode: soft-light;      /* 柔光 */
mix-blend-difference      mix-blend-mode: difference;      /* 差值 */
mix-blend-exclusion       mix-blend-mode: exclusion;       /* 排除 */
mix-blend-hue             mix-blend-mode: hue;             /* 色相 */
mix-blend-saturation      mix-blend-mode: saturation;      /* 饱和度 */
mix-blend-color           mix-blend-mode: color;           /* 颜色 */
mix-blend-luminosity      mix-blend-mode: luminosity;      /* 明度 */
</body>

</html>